<template>
  <div id="app">

    <!-- 新增表单 -->
    <el-dialog center title="新增公告" :visible.sync="addFormView">
      <el-form label-position="left" label-width="80px" :model="add">
        <el-form-item  label="公告内容" >
          <el-input v-model="add.content" placeholder="公告内容" autocomplete="off" type="textarea" :autosize="{ minRows: 4}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="addFormView = false">取 消</el-button>
        <el-button type="primary" @click="submitAddForm">确 定</el-button>
      </div>
    </el-dialog>

    <!-- 修改表单 -->
    <el-dialog center title="修改公告" :visible.sync="updateFormView">
      <el-form label-position="left" label-width="80px" :model="update">
        <el-form-item  label="公告内容" >
          <el-input v-model="update.content" placeholder="公告内容" autocomplete="off" type="textarea" :autosize="{ minRows: 4}"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="updateFormView = false">取 消</el-button>
        <el-button type="primary" @click="submitUpdateForm">确 定</el-button>
      </div>
    </el-dialog>

    <el-card class="box-card" shadow="always">
      <el-button type="primary" size="medium" @click="addFormView = true" plain>新增公告</el-button>
    </el-card>

    <!-- 表格以及分页 -->
    <el-card shadow="always">
      <el-table
        :data="tableData"
        style="width: 100%"
        height="415">
        <el-table-column
          label="公告内容"
          prop="content">
        </el-table-column>
        <el-table-column
          label="发布时间"
          prop="createTime">
        </el-table-column>
        <el-table-column fixed="right" label="操作">
          <template slot-scope="scope">
            <el-button
              size="mini"
              @click="handleEdit(scope.row)">编辑
            </el-button>&nbsp;
            <el-button
              type="danger"
              size="mini"
              slot="reference"
              @click="handelDelete(scope.row)">删除
            </el-button>
          </template>
        </el-table-column>
      </el-table>

      <div class="block">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="[5, 10, 20, 50]"
          :page-size="pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total">
        </el-pagination>
      </div>

    </el-card>
  </div>

</template>
<script>
import { Message, MessageBox } from 'element-ui'
import {deleteNoticeById, getNoticeList, insertNotice, updateNotice} from "@/api/notice";
export default {
  name: 'NoticePage',
  data () {
    return {
      add: {
        content: ''
      },
      update: {
        content: ''
      },
      updateFormView: false, // 修改表单显示
      addFormView: false, // 新增表单显示
      currentPage: 1, // 当前页
      pageSize: 5,
      total: 1,
      tableData: [],
    }
  },

  methods: {
    handleSizeChange (val) {
      console.log(`每页 ${val} 条`)
      this.pageSize = val
      this.getNotices()
    },
    handleCurrentChange (val) {
      console.log(`当前页: ${val}`)
      this.currentPage = val
      this.getNotices()
    },
    handleEdit (row) {
      this.updateFormView = true
      this.update = row
    },
    handelSelect () {
      this.getNotices()
    },
    handelRecet () {
      this.selectGoods = {
        goodsCode: '',
        goodsName: '',
        goodsAddress: [],
        goodsDesc: '',
        goodsPrice: '',
        goodsUnit: ''
      }
      this.getNotices()
    },
    handelAllDelete () {
      console.log('批量删除')
    },
    async handelDelete (row) {
      MessageBox.confirm('删除该条公告?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteNoticeById(row.id)
        this.getNotices()
        Message({
          type: 'success',
          message: '删除成功!'})
      })
    },
    // 提价新增表单
    async submitAddForm () {
      this.addFormView = false
      const res = await insertNotice(this.add)
      Message.success(res.data)
      this.add = {
        content: '',
        createTime: '',
      }
      await this.getNotices()
    },
    async submitUpdateForm () {
      this.updateFormView = false
      const res = await updateNotice(this.update)
      Message.success(res.data)
      this.update = {
        content: '',
        createTime: '',
      }
      await this.getNotices()
    },
    // 渲染表格
    async getNotices () {
      const res = await getNoticeList(this.currentPage, this.pageSize)
      this.tableData = res.data.list
      this.total = res.data.total
    }

  },

  created () {
    // 渲染表格
    this.getNotices()
  }

}
</script>

<style scoped>
.box-card{
  margin-bottom: 5px;
}
.el-input{
  width: 200px;
  margin-right: 5px;
}
.el-card ::v-deep .el-card__body {
  padding: 10px;
}
.el-pagination {
  padding: 15px;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
</style>
